<template>
    <div
        style="
            width: 638px;
            box-sizing: border-box;
            background: #f6f6f7;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
            position: relative;
        "
        v-if="sessionId"
    >
        <div
            style="
                height: 62px;
                line-height: 62px;
                padding-left: 15px;
                border-bottom: 1px solid #eee;
                font-weight: bold;
                display: flex;
                align-items: center;
            "
        >
            <div style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
                {{ title }}
            </div>
            <i
                class="el-icon-more"
                style="width: 60px; text-align: center; cursor: pointer"
                v-if="classify == 2"
                @click="hanlePopover"
            ></i>
        </div>
        <div
            style="
                width: 220px;
                position: absolute;
                right: 0px;
                background: #fff;
                padding: 10px;
                z-index: 10000;
                border-radius: 8px;
            "
            v-if="visible"
            v-click-out="clickImgOut"
        >
            <div style="height: 576px; box-sizing: border-box">
                <!-- <div class="search">
                    <el-input
                        placeholder="搜索群成员"
                        prefix-icon="el-icon-search"
                        v-model="search"
                        size="small"
                        clearable
                    >
                    </el-input>
                </div> -->
                <div
                    style="
                        display: flex;
                        /* margin-top: 20px; */
                        padding-bottom: 10px;
                        flex-wrap: wrap;
                        overflow: auto;
                        max-height: 338px;
                    "
                >
                    <div
                        v-for="(item, index) in memberList"
                        :key="index"
                        style="display: flex; align-items: center; flex-direction: column; margin: 0px 3px 10px 3px"
                    >
                        <el-avatar
                            style="width: 40px; height: 40px; border-radius: 6px"
                            shape="square"
                            :src="item.avatar"
                            @error="true"
                            slot="reference"
                        >
                            <div style="background: #007fff; font-size: 12px; line-height: 40px">
                                {{ item.name | obtainAlias }}
                            </div>
                        </el-avatar>
                        <div
                            style="
                                font-size: 12px;
                                margin-top: 5px;
                                overflow: hidden;
                                width: 48px;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                text-align: center;
                            "
                        >
                            {{ item.name }}
                        </div>
                    </div>
                    <div
                        style="
                            display: flex;
                            align-items: center;
                            flex-direction: column;
                            margin: 0px 7px 10px 7px;
                            cursor: pointer;
                        "
                        @click="showAddDialog"
                    >
                        <i
                            class="el-icon-plus"
                            style="
                                width: 40px;
                                height: 40px;
                                line-height: 40px;
                                text-align: center;
                                border-radius: 6px;
                                border: 1px solid #eee;
                                box-sizing: border-box;
                            "
                        ></i>
                        <div style="font-size: 12px; margin-top: 5px">添加</div>
                    </div>
                    <div
                        style="
                            display: flex;
                            align-items: center;
                            flex-direction: column;
                            margin: 0px 7px 10px 7px;
                            cursor: pointer;
                        "
                        v-if="userId === room.owner"
                        @click="showRemoveDialog"
                    >
                        <i
                            class="el-icon-minus"
                            style="
                                width: 40px;
                                height: 40px;
                                line-height: 40px;
                                text-align: center;
                                border-radius: 6px;
                                border: 1px solid #eee;
                                box-sizing: border-box;
                            "
                        ></i>
                        <div style="font-size: 12px; margin-top: 5px">移出</div>
                    </div>
                </div>
                <div style="border-top: 1px solid #eee; padding-top: 20px; margin-bottom: 20px">
                    <div style="margin-bottom: 10px">群聊名称</div>
                    <div>
                        <el-input placeholder="群聊名称" v-model="room.name" size="small" clearable @blur="modifyName">
                        </el-input>
                    </div>
                </div>
                <div
                    style="
                        width: 100%;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        border-top: 1px solid #eee;
                        cursor: pointer;
                    "
                    @click="handleClear"
                >
                    清空聊天记录
                </div>
                <div
                    style="
                        width: 100%;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        color: #f56c6c;
                        border-top: 1px solid #eee;
                        cursor: pointer;
                    "
                    @click="handleQuit"
                >
                    退出群聊
                </div>
            </div>
        </div>
        <el-scrollbar
            style="
                border-bottom: 1px solid #eee;
                height: 436px;
                overflow-y: scroll;
                box-sizing: border-box;
                padding-bottom: 15px;
                scrollbar-width: none;
            "
            ref="message"
        >
            <InfiniteLoading @infinite="infiniteHandler" direction="top" ref="infiniteLoading">
                <div slot="no-more"></div>
                <div slot="no-results"></div>
            </InfiniteLoading>
            <div v-for="(item, index) in tableData" :key="index">
                <div style="text-align: center; color: #a1a1a3; font-size: 12px; margin: 15px 0px">
                    {{ item.createTime | formatDate }}
                </div>
                <div
                    :style="{
                        display: 'flex',
                        'justify-content': item.source == source ? 'flex-end' : 'flex-start'
                    }"
                    v-if="item.type != 0"
                >
                    <el-avatar
                        class="avatar"
                        shape="square"
                        :src="item.avatar"
                        @error="true"
                        slot="reference"
                        v-if="item.source != source"
                    >
                        <div style="background: #007fff; font-size: 12px; line-height: 36px">
                            {{ item.name | obtainAlias }}
                        </div>
                    </el-avatar>
                    <context-menu
                        :menu="[{ label: '复制' }, { label: '删除' }, { label: '撤回' }]"
                        @select="handleMenu($event, item, index)"
                        v-if="item.type == 1"
                    >
                        <div
                            :style="{
                                background: item.source == source ? '#d1def0' : '#fff',
                                color: '#000',
                                'font-size': '13px',
                                padding: '10px 10px 10px 10px',
                                'border-radius': '4px',
                                'max-width': '280px',
                                'word-wrap': 'break-word'
                            }"
                            class="emoji-font"
                            v-html="formatHtml(item.content)"
                        ></div>
                    </context-menu>
                    <context-menu
                        :menu="[{ label: '下载' }, { label: '复制' }, { label: '删除' }, { label: '撤回' }]"
                        @select="handleMenu($event, item, index)"
                        v-else-if="item.type == 2"
                    >
                        <div>
                            <el-image
                                :src="item.content"
                                :preview-src-list="[item.content]"
                                style="margin-right: 10px; border-radius: 4px; max-width: 120px"
                            ></el-image>
                        </div>
                    </context-menu>
                    <context-menu
                        :menu="[{ label: '下载' }, { label: '复制' }, { label: '删除' }, { label: '撤回' }]"
                        @select="handleMenu($event, item, index)"
                        v-if="item.type == 3"
                    >
                        <div
                            :style="{
                                background: item.source == source ? '#fff' : '#fff',
                                'box-sizing': 'border-box',
                                color: '#000',
                                'font-size': '12px',
                                padding: '10px 10px 10px 10px',
                                'border-radius': '4px',
                                width: '278px',
                                display: 'flex'
                            }"
                            @click="showFileDialog(item.content)"
                        >
                            <div style="flex: 1">
                                <div
                                    style="
                                        width: 210px;
                                        font-size: 15px;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        -webkit-line-clamp: 2;
                                        display: -webkit-box;
                                        -webkit-box-orient: vertical;
                                        margin-right: 10px;
                                    "
                                >
                                    {{ JSON.parse(item.content).name }}
                                </div>
                                <div style="color: #a1a1a3">{{ JSON.parse(item.content).size | formatSize }}</div>
                            </div>
                            <div style="width: 40px">
                                <img
                                    src="@/assets/fileType/word.svg"
                                    v-if="JSON.parse(item.content).type === 'word'"
                                    style="width: 40px; height: 40px; border-radius: 4px"
                                />
                                <img
                                    src="@/assets/fileType/excel.svg"
                                    v-else-if="JSON.parse(item.content).type === 'excel'"
                                    style="width: 40px; height: 40px; border-radius: 4px"
                                />
                                <img
                                    src="@/assets/fileType/ofd.svg"
                                    v-else-if="JSON.parse(item.content).type === 'ofd'"
                                    style="width: 40px; height: 40px; border-radius: 4px"
                                />
                                <img
                                    src="@/assets/fileType/pdf.svg"
                                    v-else-if="JSON.parse(item.content).type === 'pdf'"
                                    style="width: 40px; height: 40px; border-radius: 4px"
                                />
                                <img
                                    src="@/assets/fileType/ppt.svg"
                                    v-else-if="JSON.parse(item.content).type === 'ppt'"
                                    style="width: 40px; height: 40px; border-radius: 4px"
                                />
                                <img
                                    src="@/assets/fileType/rtf.svg"
                                    v-else-if="JSON.parse(item.content).type === 'rtf'"
                                    style="width: 40px; height: 40px; border-radius: 4px"
                                />
                                <img
                                    src="@/assets/fileType/tif.svg"
                                    v-else-if="JSON.parse(item.content).type === 'tif'"
                                    style="width: 40px; height: 40px; border-radius: 4px"
                                />
                                <img
                                    src="@/assets/fileType/txt.svg"
                                    v-else-if="JSON.parse(item.content).type === 'txt'"
                                    style="width: 40px; height: 40px; border-radius: 4px"
                                />
                                <img
                                    src="@/assets/fileType/zip.svg"
                                    v-else-if="JSON.parse(item.content).type === 'zip'"
                                    style="width: 40px; height: 40px; border-radius: 4px"
                                />
                                <img
                                    src="@/assets/fileType/other.svg"
                                    v-else-if="JSON.parse(item.content).type === 'other'"
                                    style="width: 40px; height: 40px; border-radius: 4px"
                                />
                            </div>
                        </div>
                    </context-menu>
                    <context-menu
                        :menu="[{ label: '下载' }, { label: '复制' }, { label: '删除' }, { label: '撤回' }]"
                        @select="handleMenu($event, item, index)"
                        v-else-if="item.type == 5"
                    >
                        <div @click="showVideoDialog(item.content)" style="position: relative; cursor: pointer">
                            <el-image
                                :src="JSON.parse(item.content).poster"
                                style="margin-right: 10px; border-radius: 4px; max-width: 120px"
                            >
                                <div slot="error" style="background:#909399;width: 120px;height:80px"></div>
                            </el-image>
                            <div
                                style="
                                    margin-top: -24px;
                                    border: 1px solid #fff;
                                    width: 36px;
                                    height: 36px;
                                    border-radius: 50%;
                                    position: absolute;
                                    top: 50%;
                                    left: 40px;
                                "
                            >
                                <div class="play"></div>
                            </div>
                            <div style="position: absolute; bottom: 8px; right: 15px; color: #fff; font-size: 12px">
                                {{ JSON.parse(item.content).duration | formatDuration }}
                            </div>
                        </div>
                    </context-menu>
                    <el-avatar
                        class="avatar"
                        shape="square"
                        :src="item.avatar"
                        @error="true"
                        slot="reference"
                        v-if="item.source == source"
                    >
                        <div style="background: #007fff; font-size: 12px; line-height: 36px">
                            {{ item.name | obtainAlias }}
                        </div>
                    </el-avatar>
                </div>
                <div v-else style="display: flex; justify-content: center; color: #a1a1a3; font-size: 12px">
                    {{ item | formatRevoke }}
                </div>
            </div>
        </el-scrollbar>
        <div style="height: 160px; position: relative">
            <div style="display: flex; align-items: center; margin-left: 10px">
                <el-popover ref="popoverRef" placement="top-start" width="410" trigger="click">
                    <div class="emoji-container">
                        <div
                            v-for="(item, index) in emojiData"
                            :key="index"
                            class="emoji emoji-font"
                            @click="handleEmoji(item.content)"
                        >
                            {{ item.content }}
                        </div>
                    </div>
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="#333"
                        width="22"
                        height="22"
                        slot="reference"
                        style="cursor: pointer; margin-top: 3px"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="1.5"
                            d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                        />
                    </svg>
                </el-popover>
                <el-upload
                    multiple
                    :action="action"
                    :headers="headers"
                    :show-file-list="false"
                    :on-success="handleUploadSuccess"
                    :before-upload="beforeUpload"
                >
                    <i
                        class="el-icon-folder"
                        style="color: #333; font-size: 20px; cursor: pointer; margin-left: 10px"
                    ></i>
                </el-upload>
                <i
                    class="el-icon-chat-dot-round"
                    style="color: #333; font-size: 20px; cursor: pointer; margin-left: 10px"
                    @click="handleRecord"
                ></i>
            </div>
            <div
                contenteditable="true"
                class="editor emoji-font"
                ref="editor"
                @paste="handlePaste"
                @blur="handleBlur"
                @keydown="keydownListener"
            ></div>
            <el-button size="small" style="position: absolute; right: 10px; bottom: 5px" @click="handleEmit"
                >发送(S)</el-button
            >
        </div>
        <el-dialog
            title="添加成员"
            width="640px"
            :visible.sync="formVisible"
            :close-on-click-modal="false"
            append-to-body
        >
            <div style="display: flex; margin-top: -20px; height: 395px">
                <div style="flex: 1; padding-right: 15px">
                    <el-input placeholder="搜索" v-model="filterText" prefix-icon="el-icon-search" size="small">
                    </el-input>
                    <el-tree
                        ref="tree"
                        :data="treeData"
                        :props="defaultProps"
                        show-checkbox
                        highlight-current
                        :default-expanded-keys="['100']"
                        node-key="code"
                        :filter-node-method="filterNode"
                        style="margin-top: 10px; height: 430px; overflow: auto"
                        @check="nodeCheck"
                    >
                        <span
                            slot-scope="{ node, data }"
                            style="display: flex; justify-content: center; align-items: center"
                        >
                            <i
                                class="el-icon-user"
                                v-if="data.type === 'user'"
                                style="font-size: 16px; margin-right: 6px; color: #3975c6"
                            ></i>
                            <i
                                class="el-icon-folder"
                                v-else
                                style="font-size: 16px; margin-right: 6px; color: #3975c6"
                            ></i>
                            <span>{{ node.label }}</span>
                        </span>
                    </el-tree>
                </div>
                <div style="flex: 1; overflow: auto">
                    <div
                        v-for="(item, index) in checkedUsers"
                        :key="index"
                        style="display: flex; align-items: center; margin-bottom: 10px"
                    >
                        <el-avatar
                            shape="square"
                            :src="item.avatar"
                            @error="true"
                            style="border-radius: 6px; width: 36px; height: 36px; line-height: 36px"
                        >
                            <div style="background: #007fff; font-size: 12px">
                                {{ item.name | obtainAlias }}
                            </div>
                        </el-avatar>
                        <span style="margin-left: 10px; width: 240px; color: #000">{{ item.name }}</span>
                        <i class="el-icon-close" @click="handleDelete(index, item.id)"></i>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="formVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAddMember">完成</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="删除成员"
            width="640px"
            :visible.sync="removeFormVisible"
            :close-on-click-modal="false"
            append-to-body
        >
            <div style="display: flex; margin-top: -20px; height: 395px">
                <div style="flex: 1; padding-right: 15px">
                    <el-input placeholder="搜索" v-model="filterText" prefix-icon="el-icon-search" size="small">
                    </el-input>
                    <el-tree
                        ref="removeTree"
                        :data="removeList"
                        :props="defaultProps"
                        show-checkbox
                        highlight-current
                        :default-expanded-keys="['100']"
                        node-key="code"
                        :filter-node-method="filterNode"
                        style="margin-top: 10px; height: 430px; overflow: auto"
                        @check="nodeRemoveCheck"
                    >
                    </el-tree>
                </div>
                <div style="flex: 1; overflow: auto">
                    <div
                        v-for="(item, index) in checkedUsers"
                        :key="index"
                        style="display: flex; align-items: center; margin-bottom: 10px"
                    >
                        <el-avatar
                            shape="square"
                            :src="item.avatar"
                            @error="true"
                            style="border-radius: 6px; width: 36px; height: 36px; line-height: 36px"
                        >
                            <div style="background: #007fff; font-size: 12px">
                                {{ item.name | obtainAlias }}
                            </div>
                        </el-avatar>
                        <span style="margin-left: 10px; width: 240px; color: #000">{{ item.name }}</span>
                        <i class="el-icon-close" @click="handleDelete(index, item.id)"></i>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="removeFormVisible = false">取消</el-button>
                <el-button type="primary" @click="handleRemoveMember">完成</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="聊天记录"
            width="640px"
            :visible.sync="historyVisible"
            :close-on-click-modal="false"
            append-to-body
        >
            <div style="margin-top: -20px; height: 395px">
                <div>
                    <el-input
                        placeholder="搜索"
                        prefix-icon="el-icon-search"
                        v-model="recordSearch"
                        size="small"
                        clearable
                        @input="handleInput"
                    >
                    </el-input>
                </div>
                <el-tabs v-model="activeName" @tab-click="handleTabClick">
                    <el-tab-pane label="全部" name="all">
                        <el-scrollbar
                            style="
                                border-bottom: 1px solid #eee;
                                height: 354px;
                                overflow-y: scroll;
                                box-sizing: border-box;
                                padding-top: 10px;
                                padding-bottom: 15px;
                                scrollbar-width: none;
                            "
                            ref="record"
                        >
                            <InfiniteLoading
                                @infinite="infiniteRecordHandler"
                                direction="top"
                                :identifier="switchTrigger"
                            >
                                <div slot="no-more"></div>
                                <div slot="no-results">
                                    <el-empty description="无内容" v-if="recordList.length === 0"></el-empty>
                                </div>
                            </InfiniteLoading>
                            <div v-for="(item, index) in recordList" :key="index">
                                <div style="display: flex">
                                    <el-avatar
                                        class="avatar"
                                        style="margin-left: 0px"
                                        shape="square"
                                        :src="item.avatar"
                                        @error="true"
                                        slot="reference"
                                    >
                                        <div style="background: #007fff; font-size: 12px; line-height: 36px">
                                            {{ item.name | obtainAlias }}
                                        </div>
                                    </el-avatar>
                                    <context-menu
                                        :menu="[{ label: '复制' }]"
                                        @select="handleMenu($event, item)"
                                        v-if="item.type == 1"
                                    >
                                        <div style="border-bottom: 1px solid #e0e1e2; margin: 5px 0px">
                                            <div style="display: flex; align-items: center">
                                                <div style="width: 460px; font-size: 13px">{{ item.name }}</div>
                                                <div
                                                    style="
                                                        color: #a1a1a3;
                                                        font-size: 12px;
                                                        width: 80px;
                                                        text-align: right;
                                                    "
                                                >
                                                    {{ item.createTime | formatDate }}
                                                </div>
                                            </div>
                                            <div
                                                :style="{
                                                    background: '#fff',
                                                    color: '#000',
                                                    'font-size': '13px',
                                                    padding: '5px 10px 10px 0px',
                                                    'border-radius': '4px',
                                                    'max-width': '300px',
                                                    'word-wrap': 'break-word'
                                                }"
                                                class="emoji-font"
                                                v-html="formatHtml(item.content)"
                                            ></div>
                                        </div>
                                    </context-menu>
                                    <context-menu
                                        :menu="[{ label: '下载' }, { label: '复制' }]"
                                        @select="handleMenu($event, item)"
                                        v-else-if="item.type == 2"
                                    >
                                        <div style="border-bottom: 1px solid #e0e1e2; margin: 5px 0px">
                                            <div style="display: flex; align-items: center">
                                                <div style="width: 460px; font-size: 13px">{{ item.name }}</div>
                                                <div
                                                    style="
                                                        color: #a1a1a3;
                                                        font-size: 12px;
                                                        width: 80px;
                                                        text-align: right;
                                                    "
                                                >
                                                    {{ item.createTime | formatDate }}
                                                </div>
                                            </div>
                                            <div>
                                                <el-image
                                                    :src="item.content"
                                                    :preview-src-list="[item.content]"
                                                    style="border-radius: 4px; max-width: 120px"
                                                ></el-image>
                                            </div>
                                        </div>
                                    </context-menu>
                                    <context-menu
                                        :menu="[{ label: '下载' }, { label: '复制' }]"
                                        @select="handleMenu($event, item)"
                                        v-if="item.type == 3"
                                    >
                                        <div
                                            style="
                                                border-bottom: 1px solid #e0e1e2;
                                                margin: 5px 0px;
                                                padding-bottom: 10px;
                                            "
                                            @click="showFileDialog(item.content)"
                                        >
                                            <div style="display: flex; align-items: center">
                                                <div style="width: 460px; font-size: 13px">{{ item.name }}</div>
                                                <div
                                                    style="
                                                        color: #a1a1a3;
                                                        font-size: 12px;
                                                        width: 80px;
                                                        text-align: right;
                                                    "
                                                >
                                                    {{ item.createTime | formatDate }}
                                                </div>
                                            </div>
                                            <div
                                                :style="{
                                                    background: item.source == source ? '#fff' : '#fff',
                                                    'box-sizing': 'border-box',
                                                    color: '#000',
                                                    'font-size': '12px',
                                                    padding: '10px 10px 10px 10px',
                                                    'border-radius': '4px',
                                                    width: '278px',
                                                    display: 'flex',
                                                    'margin-top': '10px',
                                                    border: '1px solid #E0E1E2'
                                                }"
                                            >
                                                <div style="flex: 1">
                                                    <div
                                                        style="
                                                            width: 210px;
                                                            font-size: 15px;
                                                            overflow: hidden;
                                                            text-overflow: ellipsis;
                                                            -webkit-line-clamp: 2;
                                                            display: -webkit-box;
                                                            -webkit-box-orient: vertical;
                                                            margin-right: 10px;
                                                        "
                                                    >
                                                        {{ JSON.parse(item.content).name }}
                                                    </div>
                                                    <div style="color: #a1a1a3">
                                                        {{ JSON.parse(item.content).size | formatSize }}
                                                    </div>
                                                </div>
                                                <div style="width: 40px">
                                                    <img
                                                        src="@/assets/fileType/word.svg"
                                                        v-if="JSON.parse(item.content).type === 'word'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                    <img
                                                        src="@/assets/fileType/excel.svg"
                                                        v-else-if="JSON.parse(item.content).type === 'excel'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                    <img
                                                        src="@/assets/fileType/ofd.svg"
                                                        v-else-if="JSON.parse(item.content).type === 'ofd'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                    <img
                                                        src="@/assets/fileType/pdf.svg"
                                                        v-else-if="JSON.parse(item.content).type === 'pdf'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                    <img
                                                        src="@/assets/fileType/ppt.svg"
                                                        v-else-if="JSON.parse(item.content).type === 'ppt'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                    <img
                                                        src="@/assets/fileType/rtf.svg"
                                                        v-else-if="JSON.parse(item.content).type === 'rtf'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                    <img
                                                        src="@/assets/fileType/tif.svg"
                                                        v-else-if="JSON.parse(item.content).type === 'tif'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                    <img
                                                        src="@/assets/fileType/txt.svg"
                                                        v-else-if="JSON.parse(item.content).type === 'txt'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                    <img
                                                        src="@/assets/fileType/zip.svg"
                                                        v-else-if="JSON.parse(item.content).type === 'zip'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                    <img
                                                        src="@/assets/fileType/other.svg"
                                                        v-else-if="JSON.parse(item.content).type === 'other'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </context-menu>
                                    <context-menu
                                        :menu="[{ label: '下载' }, { label: '复制' }]"
                                        @select="handleMenu($event, item, index)"
                                        v-else-if="item.type == 5"
                                    >
                                        <div
                                            @click="showVideoDialog(item.content)"
                                            style="position: relative; cursor: pointer"
                                        >
                                            <el-image
                                                :src="JSON.parse(item.content).poster"
                                                style="margin-right: 10px; border-radius: 4px; max-width: 120px"
                                            >
                                                <div slot="error" style="background:#909399;width: 120px;height:80px"></div>
                                            </el-image>
                                            <div
                                                style="
                                                    margin-top: -24px;
                                                    border: 1px solid #fff;
                                                    width: 36px;
                                                    height: 36px;
                                                    border-radius: 50%;
                                                    position: absolute;
                                                    top: 50%;
                                                    left: 40px;
                                                "
                                            >
                                                <div class="play"></div>
                                            </div>
                                        </div>
                                    </context-menu>
                                </div>
                            </div>
                        </el-scrollbar>
                    </el-tab-pane>
                    <el-tab-pane label="文件" name="file">
                        <el-scrollbar
                            style="
                                border-bottom: 1px solid #eee;
                                height: 354px;
                                overflow-y: scroll;
                                box-sizing: border-box;
                                padding-top: 10px;
                                padding-bottom: 15px;
                                scrollbar-width: none;
                            "
                            ref="recordFile"
                        >
                            <InfiniteLoading
                                @infinite="infiniteRecordFileHandler"
                                direction="top"
                                :identifier="switchTrigger"
                            >
                                <div slot="no-more"></div>
                                <div slot="no-results">
                                    <el-empty description="无内容" v-if="recordFileList.length === 0"></el-empty>
                                </div>
                            </InfiniteLoading>
                            <div v-for="(item, index) in recordFileList" :key="index">
                                <div style="display: flex">
                                    <el-avatar
                                        class="avatar"
                                        style="margin-left: 0px"
                                        shape="square"
                                        :src="item.avatar"
                                        @error="true"
                                        slot="reference"
                                    >
                                        <div style="background: #007fff; font-size: 12px; line-height: 36px">
                                            {{ item.name | obtainAlias }}
                                        </div>
                                    </el-avatar>
                                    <context-menu
                                        :menu="[{ label: '下载' }, { label: '复制' }]"
                                        @select="handleMenu($event, item)"
                                    >
                                        <div
                                            style="
                                                border-bottom: 1px solid #e0e1e2;
                                                margin: 5px 0px;
                                                padding-bottom: 10px;
                                            "
                                            @click="showFileDialog(item.content)"
                                        >
                                            <div style="display: flex; align-items: center">
                                                <div style="width: 460px; font-size: 13px">{{ item.name }}</div>
                                                <div
                                                    style="
                                                        color: #a1a1a3;
                                                        font-size: 12px;
                                                        width: 80px;
                                                        text-align: right;
                                                    "
                                                >
                                                    {{ item.createTime | formatDate }}
                                                </div>
                                            </div>
                                            <div
                                                :style="{
                                                    background: item.source == source ? '#fff' : '#fff',
                                                    'box-sizing': 'border-box',
                                                    color: '#000',
                                                    'font-size': '12px',
                                                    padding: '10px 10px 10px 10px',
                                                    'border-radius': '4px',
                                                    width: '278px',
                                                    display: 'flex',
                                                    'margin-top': '10px',
                                                    border: '1px solid #E0E1E2'
                                                }"
                                            >
                                                <div style="flex: 1">
                                                    <div
                                                        style="
                                                            width: 210px;
                                                            font-size: 15px;
                                                            overflow: hidden;
                                                            text-overflow: ellipsis;
                                                            -webkit-line-clamp: 2;
                                                            display: -webkit-box;
                                                            -webkit-box-orient: vertical;
                                                            margin-right: 10px;
                                                        "
                                                    >
                                                        {{ JSON.parse(item.content).name }}
                                                    </div>
                                                    <div style="color: #a1a1a3">
                                                        {{ JSON.parse(item.content).size | formatSize }}
                                                    </div>
                                                </div>
                                                <div style="width: 40px">
                                                    <img
                                                        src="@/assets/fileType/word.svg"
                                                        v-if="JSON.parse(item.content).type === 'word'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                    <img
                                                        src="@/assets/fileType/excel.svg"
                                                        v-else-if="JSON.parse(item.content).type === 'excel'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                    <img
                                                        src="@/assets/fileType/ofd.svg"
                                                        v-else-if="JSON.parse(item.content).type === 'ofd'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                    <img
                                                        src="@/assets/fileType/pdf.svg"
                                                        v-else-if="JSON.parse(item.content).type === 'pdf'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                    <img
                                                        src="@/assets/fileType/ppt.svg"
                                                        v-else-if="JSON.parse(item.content).type === 'ppt'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                    <img
                                                        src="@/assets/fileType/rtf.svg"
                                                        v-else-if="JSON.parse(item.content).type === 'rtf'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                    <img
                                                        src="@/assets/fileType/tif.svg"
                                                        v-else-if="JSON.parse(item.content).type === 'tif'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                    <img
                                                        src="@/assets/fileType/txt.svg"
                                                        v-else-if="JSON.parse(item.content).type === 'txt'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                    <img
                                                        src="@/assets/fileType/zip.svg"
                                                        v-else-if="JSON.parse(item.content).type === 'zip'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                    <img
                                                        src="@/assets/fileType/other.svg"
                                                        v-else-if="JSON.parse(item.content).type === 'other'"
                                                        style="width: 40px; height: 40px; border-radius: 4px"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </context-menu>
                                </div>
                            </div>
                        </el-scrollbar>
                    </el-tab-pane>
                    <el-tab-pane label="图片与视频" name="pictureAndVideo">
                        <el-scrollbar
                            style="
                                border-bottom: 1px solid #eee;
                                height: 354px;
                                overflow-y: scroll;
                                box-sizing: border-box;
                                padding-top: 10px;
                                padding-bottom: 15px;
                                scrollbar-width: none;
                            "
                            ref="recordPicture"
                        >
                            <InfiniteLoading
                                @infinite="infiniteRecordPictureHandler"
                                direction="bottom"
                                :identifier="switchTrigger"
                            >
                                <div slot="no-more"></div>
                                <div slot="no-results">
                                    <el-empty
                                        description="无内容"
                                        v-if="Object.keys(recordPictureList).length === 0"
                                    ></el-empty>
                                </div>
                            </InfiniteLoading>
                            <div v-for="(item, index) in recordPictureList" :key="index">
                                <div>
                                    <div style="color: #000">{{ index }}</div>
                                    <div style="display: flex; margin-top: 10px; flex-wrap: wrap; gap: 10px">
                                        <div v-for="(itemDetail, indexItem) in item" :key="indexItem">
                                            <context-menu
                                                :index="indexItem"
                                                :menu="[{ label: '下载' }, { label: '复制' }]"
                                                @select="handleMenu($event, itemDetail)"
                                                v-if="itemDetail.type == 2"
                                            >
                                                <el-image
                                                    :src="itemDetail.content"
                                                    :preview-src-list="[itemDetail.content]"
                                                    style="border-radius: 4px; width: 90px; height: 90px"
                                                ></el-image>
                                            </context-menu>
                                            <context-menu
                                                :menu="[{ label: '下载' }, { label: '复制' }]"
                                                @select="handleMenu($event, itemDetail)"
                                                v-else-if="itemDetail.type == 5"
                                            >
                                                <div
                                                    @click="showVideoDialog(itemDetail.content)"
                                                    style="position: relative; cursor: pointer"
                                                >
                                                    <el-image
                                                        :src="JSON.parse(itemDetail.content).poster"
                                                        style="
                                                            margin-right: 10px;
                                                            border-radius: 4px;
                                                            width: 90px;
                                                            height: 90px;
                                                        "
                                                    >
                                                        <div slot="error" style="background:#909399;width: 90px;height:90px"></div>
                                                    </el-image>
                                                    <div
                                                        style="
                                                            margin-top: -20px;
                                                            border: 1px solid #fff;
                                                            width: 30px;
                                                            height: 30px;
                                                            border-radius: 50%;
                                                            position: absolute;
                                                            top: 50%;
                                                            left: 30px;
                                                        "
                                                    >
                                                        <div class="record-play"></div>
                                                    </div>
                                                </div>
                                            </context-menu>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-scrollbar>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>
        <player ref="player"></player>
        <preview ref="preview"></preview>
    </div>
</template>

<script>
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import calendar from 'dayjs/plugin/calendar'
dayjs.extend(calendar)
dayjs.locale('zh-cn')
import InfiniteLoading from 'vue-infinite-loading'
import player from '@/views/player'
import preview from '@/views/preview'
export default {
    components: {
        InfiniteLoading,
        player,
        preview
    },
    data() {
        return {
            action: this.$axios.defaults.baseURL + 'upload/putObject/oss',
            headers: {
                Authorization: window.localStorage.getItem('Authorization')
            },
            id: '',
            classify: '',
            sessionId: '',
            source: '',
            target: [],
            title: '',
            tableData: [],
            emojiData: [],
            room: {},
            search: '',
            visible: false,
            memberList: [],
            lastEditRange: null,
            selectedIndex: -1,
            formVisible: false,
            filterText: '',
            treeData: [],
            defaultProps: {
                label: 'name'
            },
            checkedUsers: [],
            removeFormVisible: false,
            removeList: [],
            activeName: 'all',
            historyVisible: false,
            recordSearch: '',
            recordList: [],
            switchTrigger: '',
            recordFileList: [],
            recordPictureList: {},
            endTime: ''
        }
    },
    computed: {
        userId() {
            return localStorage.getItem('userId')
        },
        name() {
            return localStorage.getItem('name')
        },
        mac() {
            return localStorage.getItem('mac')
        },
        avatar() {
            return localStorage.getItem('avatar')
        }
    },
    filters: {
        formatDate(value) {
            return dayjs(value).calendar(null, {
                sameDay: 'HH:mm',
                lastDay: '[昨天]',
                lastWeek: 'dddd',
                sameElse: 'YYYY/MM/DD'
            })
        },
        formatRevoke(item) {
            if (item.source === localStorage.getItem('userId')) {
                return '你撤回一条消息'
            } else {
                return '"' + item.name + '"' + ' 撤回一条消息'
            }
        },
        obtainAlias(value) {
            if (value.length <= 2) {
                return value
            } else {
                return value.substring(value.length - 2, value.length)
            }
        },
        formatSize(bytes) {
            if (bytes === 0) return '0 B'
            const k = 1024
            const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
            const i = Math.floor(Math.log(bytes) / Math.log(k))
            return parseFloat((bytes / Math.pow(k, i)).toFixed(0)) + ' ' + sizes[i]
        },
        formatDuration(value) {
            if (value < 10) {
                return '0:0' + value
            } else if (value < 60) {
                return '0:' + value
            } else {
                return parseInt(value / 60) + ':' + (value % 60)
            }
        }
    },
    mounted() {
        this.$bus.$on('update', (data, index) => {
            if (index > -1) {
                this.tableData = []
                this.target = []
                this.classify = data[index].classify
                if (this.classify == 1) {
                    this.title = data[index].name
                    this.target.push(data[index].target)
                } else if (this.classify == 2) {
                    this.queryRoom(data[index].sessionId)
                } else if (this.classify == 3) {
                    this.title = data[index].name
                    this.target.push(data[index].target)
                }
                this.id = data[index].id
                this.sessionId = data[index].sessionId
                this.source = data[index].source
                this.$nextTick(() => {
                    this.$refs.editor.focus()
                })
                this.$nextTick(() => {
                    this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
                })
            } else {
                this.sessionId = ''
            }
        })
        this.$bus.$on('receiveData', data => {
            let params = {
                id: Date.now(),
                type: data.type,
                sessionId: data.sessionId,
                source: data.source,
                target: this.userId,
                content: data.content,
                name: data.name,
                avatar: data.avatar,
                createTime: data.createTime
            }
            this.tableData.push(params)
            this.scrollTop()
        })
        this.$bus.$on('revoke', data => {
            for (let i = 0; i < this.tableData.length; i++) {
                let item = this.tableData[i]
                if (item.sessionId === data.sessionId) {
                    if (item.msgid == data.msgid) {
                        item.type = 0
                        this.$set(this.tableData, i, item)
                        break
                    }
                } else {
                    break
                }
            }
        })
        this.queryEmoji()
    },
    beforeDestroy() {
        this.$bus.$off('update')
        this.$bus.$off('receiveData')
        this.$bus.$off('revoke')
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val)
        }
    },
    methods: {
        keydownListener(event) {
            if (event.keyCode === 13 && (event.shiftKey || event.ctrlKey)) {
                event.preventDefault()
                // Shift + Enter或 Ctrl + Enter
                event.returnValue = false
                this.$refs.editor.innerHTML = this.$refs.editor.innerHTML + '<div><br/></div>'
                if (window.getSelection) {
                    var range = window.getSelection()
                    range.selectAllChildren(this.$refs.editor)
                    range.collapseToEnd()
                } else if (document.body.createTextRange) {
                    //ie
                    var range = document.body.createTextRange()
                    range.moveToElementText(this.$refs.editor)
                    range.collapse(false)
                    range.select()
                }
                return false
            } else if (event.keyCode === 13) {
                // Enter
                event.preventDefault()
                this.handleEmit()
            }
        },
        async queryEmoji() {
            let res = await this.$axios.get('emoji/queryAllData')
            if (res.data.code == 200) {
                this.emojiData = res.data.data
            }
        },
        async queryRoom(id) {
            let res = await this.$axios.get('room/queryById/' + id)
            if (res.data.code == 200) {
                this.room = res.data.data
                this.title = res.data.data.name + ' (' + res.data.data.members.split(',').length + ')'
                this.target = res.data.data.members.split(',')
                this.memberList = res.data.data.memberList
            }
        },
        async queryAllUserData() {
            let params = {
                disabled: this.target.toString()
            }
            let res = await this.$axios.post('depart/queryAllUserData', params)
            if (res.data.code == 200) {
                this.treeData = res.data.data
            }
        },
        infiniteHandler($state) {
            let startTime = this.tableData.length === 0 ? '' : this.tableData[0].createTime
            let params = {
                sessionId: this.sessionId,
                startTime: startTime
            }
            this.$axios.post('message/queryByPage', params).then(res => {
                if (res.data.code == 200) {
                    this.tableData = res.data.data.list.concat(this.tableData)
                    if (res.data.data.isLastPage) {
                        $state.complete()
                    } else {
                        $state.loaded()
                    }
                    if (!startTime) {
                        this.scrollTop()
                    }
                } else {
                    $state.error()
                }
            })
        },
        filterNode(value, data) {
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },
        handleEmit() {
            let el = this.$refs.editor
            var nodes = el.childNodes
            var text = ''
            let isBlank = true
            for (var i = 0; i < nodes.length; i++) {
                switch (nodes[i].nodeName) {
                    case '#text':
                        text = text + nodes[i].nodeValue
                        text = text + '\n'
                        break
                    case 'IMG':
                        isBlank = false
                        let src = nodes[i].getAttribute('src')
                        let msgid = Date.now()
                        let params = {
                            msgid: msgid,
                            mac: this.mac,
                            classify: this.classify,
                            sessionId: this.sessionId,
                            source: this.source,
                            target: this.target,
                            type: 2,
                            content: src,
                            name: this.name,
                            avatar: this.avatar
                        }
                        this.$emit('emit', params)
                        let data = {
                            msgid: msgid,
                            type: 2,
                            sessionId: this.sessionId,
                            source: this.source,
                            target: this.target,
                            content: src,
                            name: this.name,
                            avatar: this.avatar
                        }
                        this.tableData.push(data)
                        this.scrollTop()
                        break
                    case 'DIV':
                        let classList = Array.from(nodes[i].classList)
                        if (classList.includes('file-box')) {
                            isBlank = false
                            let name = nodes[i].getAttribute('name')
                            let type = nodes[i].getAttribute('type')
                            let url = nodes[i].getAttribute('url')
                            let size = nodes[i].getAttribute('size')
                            let msgid = Date.now()
                            let params = {
                                msgid: msgid,
                                mac: this.mac,
                                classify: this.classify,
                                sessionId: this.sessionId,
                                source: this.source,
                                target: this.target,
                                type: 3,
                                content: JSON.stringify({ name: name, type: type, url: url, size: size }),
                                name: this.name,
                                avatar: this.avatar
                            }
                            this.$emit('emit', params)
                            let data = {
                                msgid: msgid,
                                type: 3,
                                sessionId: this.sessionId,
                                source: this.source,
                                target: this.target,
                                content: JSON.stringify({ name: name, type: type, url: url, size: size }),
                                name: this.name,
                                avatar: this.avatar
                            }
                            this.tableData.push(data)
                            this.scrollTop()
                        } else {
                            text = text + nodes[i].innerText
                            text = text + '\n'
                        }
                        break
                }
            }
            if (text.trim()) {
                let msgid = Date.now()
                let params = {
                    msgid: msgid,
                    mac: this.mac,
                    classify: this.classify,
                    sessionId: this.sessionId,
                    source: this.source,
                    target: this.target,
                    type: 1,
                    content: text,
                    name: this.name,
                    avatar: this.avatar
                }
                this.$emit('emit', params)
                let data = {
                    msgid: msgid,
                    type: 1,
                    sessionId: this.sessionId,
                    source: this.source,
                    target: this.target,
                    content: text,
                    name: this.name,
                    avatar: this.avatar,
                    createTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
                }
                this.tableData.push(data)
                this.scrollTop()
            } else {
                if (isBlank) {
                    this.$message.warning('不能发送空白信息')
                }
            }
            this.$refs.editor.innerHTML = ''
            this.$refs.editor.focus()
        },
        scrollTop() {
            this.$nextTick(() => {
                this.$refs.message.wrap.scrollTop = this.$refs.message.wrap.scrollHeight
            })
        },
        // 快捷键粘贴
        handlePaste(event) {
            if (event.clipboardData.types[0] == 'Files' || event.clipboardData.types[0] == 'application/x-moz-file') {
                event.preventDefault()
                let files = event.clipboardData.files
                for (let i = 0; i < files.length; i++) {
                    let file = files[i]
                    let formdata = new FormData()
                    formdata.append('file', file)
                    const suffix = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase()
                    let type = this.utils.getFileType(suffix)
                    const fileSize = file.size / 1024 / 1024 < 200
                    let isUpload = true
                    if (!fileSize) {
                        this.$message.error('文件大小不能超过200MB')
                        isUpload = false
                    }
                    const limitList = ['war']
                    if (limitList.includes(suffix)) {
                        this.$message.error('文件格式不符合')
                        isUpload = false
                    }
                    if (isUpload) {
                        this.$axios({
                            url: 'upload/putObject/oss',
                            method: 'post',
                            data: formdata,
                            headers: {
                                'Content-Type': 'multipart/form-data',
                                Authorization: window.localStorage.getItem('Authorization')
                            }
                        }).then(res => {
                            if (res.data.code == 200) {
                                if (type == 'image') {
                                    var img = document.createElement('img')
                                    img.src = res.data.data
                                    img.setAttribute('style', 'max-height:150px')
                                    img.id = 'copyImg' + Math.random().toString(36).slice(-6)
                                    document.body.appendChild(img)
                                    if (window.getSelection) {
                                        //chrome等主流浏览器
                                        var selection = window.getSelection()
                                        var range = document.createRange()
                                        selection.removeAllRanges()
                                        range.selectNode(img)
                                        selection.addRange(range)
                                    } else if (document.body.createTextRange) {
                                        //ie
                                        var range = document.body.createTextRange()
                                        range.moveToElementText(img)
                                        range.select()
                                    }
                                    document.execCommand('copy') // 执行浏览器复制命令
                                    document.getElementById(img.id).remove()
                                    this.$refs.editor.appendChild(img)
                                } else if (type == 'video') {
                                    var copyDiv = document.createElement('div')
                                    copyDiv.className = 'file-box img-' + type
                                    copyDiv.innerHTML = file.name + '<br/>' + this.utils.formatBytes(file.size)
                                    copyDiv.setAttribute('url', res.data.data.url)
                                    copyDiv.setAttribute('size', file.size)
                                    copyDiv.setAttribute('type', type)
                                    copyDiv.setAttribute('name', file.name)

                                    copyDiv.setAttribute('contenteditable', false)
                                    let copy = e => {
                                        e.preventDefault()
                                        e.clipboardData.setData('text/html', copyDiv.outerHTML + '<span></span>')
                                        document.removeEventListener('copy', copy)
                                    }
                                    document.addEventListener('copy', copy)
                                    document.execCommand('copy')
                                    this.$refs.editor.appendChild(copyDiv)
                                } else {
                                    //复制类型为文件操作
                                    var copyDiv = document.createElement('div')
                                    copyDiv.className = 'file-box img-' + type
                                    copyDiv.innerHTML = file.name + '<br/>' + this.utils.formatBytes(file.size)
                                    copyDiv.setAttribute('url', res.data.data)
                                    copyDiv.setAttribute('size', file.size)
                                    copyDiv.setAttribute('type', type)
                                    copyDiv.setAttribute('name', file.name)

                                    copyDiv.setAttribute('contenteditable', false)
                                    let copy = e => {
                                        e.preventDefault()
                                        e.clipboardData.setData('text/html', copyDiv.outerHTML + '<span></span>')
                                        document.removeEventListener('copy', copy)
                                    }
                                    document.addEventListener('copy', copy)
                                    document.execCommand('copy')
                                    this.$refs.editor.appendChild(copyDiv)
                                }
                            }
                        })
                    }
                }
            }
        },
        handleEmoji(value) {
            let editor = this.$refs.editor
            this.$refs.editor.innerHTML = this.$refs.editor.innerHTML + value
            this.$refs.popoverRef.doClose()
            if (window.getSelection) {
                var range = window.getSelection()
                range.selectAllChildren(editor)
                range.collapseToEnd()
            } else if (document.body.createTextRange) {
                //ie
                var range = document.body.createTextRange()
                range.moveToElementText(editor)
                range.collapse(false)
                range.select()
            }
        },
        async deleteByMsgid(index) {
            let params = {
                msgid: this.tableData[index].msgid,
                sessionId: this.tableData[index].sessionId
            }
            let res = await this.$axios.post('message/deleteByMsgid', params)
            if (res.data.code === 200) {
                this.tableData.splice(index, 1)
            }
        },
        async clearMessage() {
            let params = {
                sessionId: this.sessionId
            }
            let res = await this.$axios.post('message/clear', params)
            if (res.data.code === 200) {
                this.tableData = []
            }
        },
        handleClear() {
            this.$confirm('确定清空聊天记录', '', {
                confirmButtonText: '清空',
                cancelButtonText: '取消',
                type: 'warning',
                showClose: false
            }).then(() => {
                this.clearMessage()
            })
        },
        handleMenu(option, data, index) {
            if (option.label === '删除') {
                this.deleteByMsgid(index)
            } else if (option.label === '复制') {
                if (data.type == 1) {
                    var input = document.createElement('input')
                    input.value = data.content
                    input.id = 'copyInput' + Math.random().toString(36).slice(-6)
                    document.body.appendChild(input)
                    input.select() // 选中文本
                    document.execCommand('copy') // 执行浏览器复制命令
                    document.getElementById(input.id).remove()
                } else if (data.type == 2) {
                    var img = document.createElement('img')
                    img.src = data.content
                    img.setAttribute('style', 'max-height:150px')
                    img.id = 'copyImg' + Math.random().toString(36).slice(-6)
                    document.body.appendChild(img)
                    if (window.getSelection) {
                        //chrome等主流浏览器
                        var selection = window.getSelection()
                        var range = document.createRange()
                        selection.removeAllRanges()
                        range.selectNode(img)
                        selection.addRange(range)
                    } else if (document.body.createTextRange) {
                        //ie
                        var range = document.body.createTextRange()
                        range.moveToElementText(img)
                        range.select()
                    }
                    document.execCommand('copy') // 执行浏览器复制命令
                    document.getElementById(img.id).remove()
                } else if (data.type == 5) {
                    let item = JSON.parse(data.content)
                    var copyDiv = document.createElement('div')
                    copyDiv.className = 'file-box img-' + item.type
                    copyDiv.innerHTML = item.name + '<br/>' + this.utils.formatBytes(item.size)
                    copyDiv.setAttribute('src', item.url)
                    copyDiv.setAttribute('size', item.size)
                    copyDiv.setAttribute('type', item.type)
                    copyDiv.setAttribute('name', item.name)
                    copyDiv.setAttribute('contenteditable', false)
                    let copy = e => {
                        e.preventDefault()
                        e.clipboardData.setData('text/html', copyDiv.outerHTML + '<span></span>')
                        document.removeEventListener('copy', copy)
                    }
                    document.addEventListener('copy', copy)
                    document.execCommand('copy') // 执行浏览器复制命令
                } else {
                    //复制类型为文件操作，此处归结为富文本形态的文本复制
                    let item = JSON.parse(data.content)
                    var copyDiv = document.createElement('div')
                    copyDiv.className = 'file-box img-' + item.type
                    copyDiv.innerHTML = item.name + '<br/>' + this.utils.formatBytes(item.size)
                    copyDiv.setAttribute('src', item.url)
                    copyDiv.setAttribute('size', item.size)
                    copyDiv.setAttribute('type', item.type)
                    copyDiv.setAttribute('name', item.name)
                    copyDiv.setAttribute('contenteditable', false)
                    let copy = e => {
                        e.preventDefault()
                        e.clipboardData.setData('text/html', copyDiv.outerHTML + '<span></span>')
                        document.removeEventListener('copy', copy)
                    }
                    document.addEventListener('copy', copy)
                    document.execCommand('copy') // 执行浏览器复制命令
                }
            } else if (option.label === '下载') {
                let item = JSON.parse(data.content)
                let params = {
                    url: item.url,
                    fileName: item.name
                }
                this.$axios.post('upload/download', params, { responseType: 'blob' }).then(res => {
                    let content = res.data
                    let blob = new Blob([content])
                    if ('download' in document.createElement('a')) {
                        // 非IE下载
                        let elink = document.createElement('a')
                        elink.download = item.name
                        elink.style.display = 'none'
                        elink.href = URL.createObjectURL(blob)
                        document.body.appendChild(elink)
                        elink.click()
                        URL.revokeObjectURL(elink.href) // 释放URL 对象
                        document.body.removeChild(elink)
                    } else {
                        // IE10+下载
                        navigator.msSaveBlob(blob, item.name)
                    }
                })
            } else if (option.label === '撤回') {
                let item = data
                if (item.sessionId != '0' && this.userId === item.source) {
                    let minute = dayjs().diff(item.createTime, 'minute')
                    if (minute <= 2) {
                        let params = {
                            sessionId: item.sessionId,
                            msgid: item.msgid
                        }
                        this.$axios.post('message/revoke', params).then(res => {
                            if (res.data.code == 200) {
                            } else {
                                this.$message.error(res.data.message)
                            }
                        })
                    } else {
                        this.$message.warning('不支持撤回')
                    }
                } else {
                    this.$message.warning('不支持撤回')
                }
            }
        },
        hanlePopover() {
            this.visible = true
        },
        clickImgOut() {
            this.visible = false
        },
        handleUploadSuccess(res, file) {
            this.$loading().close()
            if (res.code == 200) {
                const suffix = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase()
                let type = this.utils.getFileType(suffix)
                let msgid = Date.now()
                let params = {
                    msgid: msgid,
                    mac: this.mac,
                    classify: this.classify,
                    sessionId: this.sessionId,
                    source: this.source,
                    target: this.target,
                    name: this.name,
                    avatar: this.avatar
                }
                let data = {
                    msgid: msgid,
                    sessionId: this.sessionId,
                    source: this.source,
                    target: this.target,
                    name: this.name,
                    avatar: this.avatar
                }
                if (type === 'image') {
                    params.type = 2
                    data.type = 2
                    params.content = res.data
                    data.content = res.data
                } else if (type === 'video') {
                    params.type = 5
                    data.type = 5
                    params.content = JSON.stringify({
                        name: res.data.name,
                        duration: res.data.duration,
                        url: res.data.url,
                        poster: res.data.poster,
                        width: res.data.width,
                        height: res.data.height,
                        format: res.data.format,
                        size: file.size,
                        type: type
                    })
                    data.content = JSON.stringify({
                        name: res.data.name,
                        duration: res.data.duration,
                        url: res.data.url,
                        poster: res.data.poster,
                        width: res.data.width,
                        height: res.data.height,
                        format: res.data.format,
                        size: file.size,
                        type: type
                    })
                } else {
                    params.type = 3
                    data.type = 3
                    params.content = JSON.stringify({ name: file.name, url: res.data, size: file.size, type: type })
                    data.content = JSON.stringify({ name: file.name, url: res.data, size: file.size, type: type })
                }
                this.$emit('emit', params)
                this.tableData.push(data)
                this.scrollTop()
            }
        },
        beforeUpload(file) {
            this.$loading({ text: '上传中，请稍后...' })
            const fileSize = file.size / 1024 / 1024 < 200
            if (!fileSize) {
                this.$loading().close()
                this.$message.error('文件大小不能超过200MB')
                return false
            }
            const suffix = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase()
            const limitList = ['war']
            if (limitList.includes(suffix)) {
                this.$loading().close()
                this.$message.error('文件格式不符合')
                return false
            }
        },
        formatHtml(value) {
            value = value.replace(/\n/g, '<br/>')
            return value
        },
        handleBlur() {
            const selection = window.getSelection()
            this.lastEditRange = selection.getRangeAt(0)
        },
        showAddDialog() {
            this.queryAllUserData()
            this.checkedUsers = []
            this.formVisible = true
            this.$nextTick(() => {
                this.$refs.tree.setCheckedNodes([])
            })
        },
        nodeCheck(data, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {
            let checkedUsers = []
            for (let i = 0; i < checkedNodes.length; i++) {
                let node = checkedNodes[i]
                if (node.type === 'user') {
                    checkedUsers.push(node)
                }
            }
            this.checkedUsers = checkedUsers
        },
        handleDelete(index, id) {
            this.checkedUsers.splice(index, 1)
            this.$refs.tree.setChecked(id, false, false)
        },
        handleAddMember() {
            let params = {
                sessionId: this.sessionId,
                data: JSON.stringify(this.checkedUsers)
            }
            if (this.checkedUsers.length === 0) {
                this.$message.error('请选中用户')
                return
            } else {
                this.$axios.post('room/addMember', params).then(res => {
                    if (res.data.code == 200) {
                        this.formVisible = false
                    } else {
                        this.$message.error(res.data.message)
                    }
                })
            }
        },
        nodeRemoveCheck(data, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {
            this.checkedUsers = checkedNodes
        },
        showRemoveDialog() {
            this.removeList = JSON.parse(JSON.stringify(this.memberList))
            this.removeList.splice(0, 1)
            this.checkedUsers = []
            this.removeFormVisible = true
            this.$nextTick(() => {
                this.$refs.removeTree.setCheckedNodes([])
            })
        },
        handleRemoveMember() {
            let params = {
                sessionId: this.sessionId,
                data: JSON.stringify(this.checkedUsers)
            }
            if (this.checkedUsers.length === 0) {
                this.$message.error('请选中用户')
                return
            } else {
                this.$axios.post('room/removeMember', params).then(res => {
                    if (res.data.code == 200) {
                        this.removeFormVisible = false
                    } else {
                        this.$message.error(res.data.message)
                    }
                })
            }
        },
        handleQuit() {
            this.$confirm('确定退出群聊', '', {
                confirmButtonText: '退出',
                cancelButtonText: '取消',
                type: 'warning',
                showClose: false
            }).then(() => {
                let params = {
                    sessionId: this.sessionId
                }
                this.$axios.post('room/quit', params).then(res => {
                    if (res.data.code == 200) {
                    } else {
                        this.$message.error(res.data.message)
                    }
                })
            })
        },
        modifyName(value) {
            let params = {
                sessionId: this.sessionId,
                name: this.room.name
            }
            this.$axios.post('room/modifyName', params).then(res => {
                if (res.data.code == 200) {
                } else {
                    this.$message.error(res.data.message)
                }
            })
        },
        handleRecord() {
            if (this.switchTrigger != this.sessionId) {
                this.recordList = []
            }
            this.activeName = 'all'
            this.endTime = ''
            this.switchTrigger = this.sessionId
            this.historyVisible = true
        },
        infiniteRecordHandler($state) {
            let typeStr = ''
            let recordSearch = ''
            if (this.activeName === 'all') {
                typeStr = '1,2,3,4,5'
                recordSearch = this.recordSearch
            } else if (this.activeName === 'file') {
                typeStr = '3'
                recordSearch = this.recordSearch
            } else if (this.activeName === 'pictureOrVideo') {
                typeStr = '2,5'
                recordSearch = ''
            }
            let startTime = this.recordList.length === 0 ? '' : this.recordList[0].createTime
            let params = {
                sessionId: this.sessionId,
                startTime: startTime,
                typeStr: typeStr,
                content: recordSearch
            }
            this.$axios.post('message/queryByPage', params).then(res => {
                if (res.data.code == 200) {
                    this.recordList = res.data.data.list.concat(this.recordList)
                    if (res.data.data.isLastPage) {
                        $state.complete()
                    } else {
                        $state.loaded()
                    }
                    if (!startTime) {
                        this.$nextTick(() => {
                            this.$refs.record.wrap.scrollTop = this.$refs.record.wrap.scrollHeight
                        })
                    }
                } else {
                    $state.error()
                }
            })
        },
        infiniteRecordFileHandler($state) {
            let typeStr = ''
            let recordSearch = ''
            if (this.activeName === 'all') {
                typeStr = '1,2,3,4,5'
                recordSearch = this.recordSearch
            } else if (this.activeName === 'file') {
                typeStr = '3'
                recordSearch = this.recordSearch
            } else if (this.activeName === 'pictureOrVideo') {
                typeStr = '2,5'
                recordSearch = ''
            }
            let startTime = this.recordFileList.length === 0 ? '' : this.recordFileList[0].createTime
            let params = {
                sessionId: this.sessionId,
                startTime: startTime,
                typeStr: typeStr,
                content: recordSearch
            }
            this.$axios.post('message/queryByPage', params).then(res => {
                if (res.data.code == 200) {
                    this.recordFileList = res.data.data.list.concat(this.recordFileList)
                    if (res.data.data.isLastPage) {
                        $state.complete()
                    } else {
                        $state.loaded()
                    }
                    if (!startTime) {
                        this.$nextTick(() => {
                            this.$refs.recordFile.wrap.scrollTop = this.$refs.recordFile.wrap.scrollHeight
                        })
                    }
                } else {
                    $state.error()
                }
            })
        },
        handleInput() {
            this.recordList = []
            this.recordFileList = []
            this.switchTrigger = Math.random().toString(36).slice(-6)
        },
        handleTabClick(tab, event) {
            this.recordList = []
            this.recordFileList = []
            this.recordPictureList = {}
            this.endTime = ''
            this.switchTrigger = this.activeName
        },
        infiniteRecordPictureHandler($state) {
            if (this.endTime) {
                this.endTime = dayjs(this.endTime).subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss')
            } else {
                this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
            }
            let startTime = dayjs(this.endTime).subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss')
            let params = {
                sessionId: this.sessionId,
                startTime: startTime,
                endTime: this.endTime
            }
            this.$axios.post('message/queryPictureAndVideo', params).then(res => {
                if (res.data.code == 200) {
                    this.recordPictureList = Object.assign({}, this.recordPictureList, res.data.data)
                    if (Object.keys(res.data.data).length === 0) {
                        $state.complete()
                    } else {
                        $state.loaded()
                    }
                } else {
                    $state.error()
                }
            })
        },
        showVideoDialog(content) {
            let data = JSON.parse(content)
            let maxWidth = 410
            let width = 0
            let height = 0
            if (data.width > maxWidth) {
                let ratio = (data.width / maxWidth).toFixed(2)
                width = maxWidth
                height = parseInt(data.height / ratio)
            } else {
                width = data.width
                height = data.height
            }
            this.$refs.player.showDialog({
                width: width,
                height: height,
                poster: data.poster,
                sources: data.url
            })
        },
        showFileDialog(content) {
            let data = JSON.parse(content)
            if (data.type === 'txt') {
                let params = {
                    url: data.url
                }
                this.$axios.post('upload/readTxt', params).then(res => {
                    if (res.data.code == 200) {
                        this.$refs.preview.showDialog({
                            title: data.name,
                            type: 'txt',
                            content: res.data.data
                        })
                    } else {
                        this.$message.error(res.data.message)
                    }
                })
            } else if (data.type === 'pdf') {
                window.open(data.url)
            } else if (data.type === 'ofd') {
                this.$refs.preview.showDialog({
                    title: data.name,
                    type: 'ofd',
                    content: data.url
                })
            } else if (data.type === 'tif') {
                window.open(this.$axios.defaults.baseURL + 'upload/preview?url=' + encodeURIComponent(obj.url))
            }
        }
    }
}
</script>
<style scoped>
[contenteditable]:focus {
    outline: none;
}
.editor {
    height: 85px;
    padding: 0px 12px;
    background: transparent;
    overflow: auto;
    scrollbar-width: thin;
    font-size: 18px;
}
.avatar {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    margin: 0px 10px;
}
.emoji-container {
    height: 320px;
    display: flex;
    flex-flow: wrap;
    overflow-y: auto;
}
.emoji {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 4px;
}
.emoji:hover {
    background: rgba(0, 0, 0, 0.1);
}
::v-deep .file-box {
    display: inline-block;
    width: 200px;
    padding: 10px 10px 10px 50px;
    white-space: nowrap;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 4px;
    font-size: 14px;
}
::v-deep .img-ppt,
::v-deep .img-excel,
::v-deep .img-pdf,
::v-deep .img-other,
::v-deep .img-tif,
::v-deep .img-txt,
::v-deep .img-word,
::v-deep .img-zip,
::v-deep .img-video,
::v-deep .img-ofd,
::v-deep .img-audio,
::v-deep .img-rtf {
    background-size: 30px 30px;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    background-color: #fff;
}
::v-deep .img-txt {
    background-image: url('../assets/fileType/txt.svg');
}
::v-deep .img-ppt {
    background-image: url('../assets/fileType/ppt.svg');
}
::v-deep .img-excel {
    background-image: url('../assets/fileType/excel.svg');
}
::v-deep .img-pdf {
    background-image: url('../assets/fileType/pdf.svg');
}
::v-deep .img-other {
    background-image: url('../assets/fileType/other.svg');
}
::v-deep .img-tif {
    background-image: url('../assets/fileType/tif.svg');
}
::v-deep .img-word {
    background-image: url('../assets/fileType/word.svg');
}
::v-deep .img-zip {
    background-image: url('../assets/fileType/zip.svg');
}
::v-deep .img-video {
    background-image: url('../assets/fileType/video.svg');
}
::v-deep .img-ofd {
    background-image: url('../assets/fileType/ofd.svg');
}
::v-deep .img-rtf {
    background-image: url('../assets/fileType/rtf.svg');
}
::v-deep .img-audio {
    background-image: url('../assets/fileType/audio.svg');
}
::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
}
::v-deep .el-tabs__nav-wrap::after {
    background-color: #fff;
}
::v-deep .el-tabs__active-bar {
    background-color: #fff;
}
.play {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-left: 12px solid #fff;
    border-bottom: 6px solid transparent;
    position: absolute;
    top: 12px;
    left: 15px;
}
.record-play {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 10px solid #fff;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: 10px;
    left: 12px;
}
</style>
